'use client'

import { useState } from 'react'
import { Header } from '@/components/layout/header'
import { Sidebar } from '@/components/layout/sidebar'
import { MarketOverview } from '@/components/dashboard/market-overview'
import { ChartSection } from '@/components/dashboard/chart-section'
import { StrategyPanel } from '@/components/dashboard/strategy-panel'
import { SentimentRadar } from '@/components/dashboard/sentiment-radar'
import { useMarketData } from '@/hooks/use-market-data'

export default function Home() {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
  const [selectedSymbol, setSelectedSymbol] = useState('BTC/USDT')
  const [selectedTimeframe, setSelectedTimeframe] = useState('1h')

  const { marketData, isLoading, error } = useMarketData(selectedSymbol, selectedTimeframe)

  return (
    <div className="min-h-screen bg-background">
      <Header 
        onToggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)} 
        isSidebarOpen={isSidebarOpen}
      />
      
      <Sidebar
        isOpen={isSidebarOpen}
        selectedSymbol={selectedSymbol}
        selectedTimeframe={selectedTimeframe}
        onSymbolChange={setSelectedSymbol}
        onTimeframeChange={setSelectedTimeframe}
      />

      <main className={cn(
        "transition-all duration-300",
        isSidebarOpen ? "md:ml-64" : "ml-0"
      )}>
        <div className="p-6">
          <div className="mb-6">
            <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
            <p className="text-muted-foreground">
              Real-time crypto analysis and trading insights
            </p>
          </div>

          {error && (
            <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
              <p className="text-red-800">{error}</p>
            </div>
          )}

          {isLoading ? (
            <div className="flex items-center justify-center h-64">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
            </div>
          ) : (
            <>
              <MarketOverview 
                symbol={selectedSymbol} 
                timeframe={selectedTimeframe} 
                data={marketData} 
              />

              <div className="grid gap-6 mt-6 lg:grid-cols-3">
                <div className="lg:col-span-2">
                  <ChartSection 
                    symbol={selectedSymbol} 
                    timeframe={selectedTimeframe} 
                    data={marketData} 
                  />
                </div>
                
                <div className="space-y-6">
                  <StrategyPanel 
                    symbol={selectedSymbol} 
                    timeframe={selectedTimeframe} 
                    data={marketData} 
                  />
                  
                  <SentimentRadar symbol={selectedSymbol} />
                </div>
              </div>
            </>
          )}
        </div>
      </main>
    </div>
  )
}

function cn(...classes: (string | boolean | undefined)[]) {
  return classes.filter(Boolean).join(' ')
}
